<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nePlayer API Demo</title>
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css">
    <link href="//nos.netease.com/vod163/nep.min.css" rel="stylesheet">
</head>
<style type="text/css">
    .m-panel-half {
        float: left;
        margin: 5px;
    }
    .row {
        margin-top: 5px;
    }
    div #div_video{
    	z-index:2;
    	position: absolute;
    }
    div #div_text{
    	width:960px;
    	height:340px;
    	z-index:1;
    	position: absolute;
    	/* background-color: red; */
    	color: #ffffff;
    	opacity: 0.8;
    }
    marquee .marquee_text{
   	 	font-size:50px;
    }
</style>
<script type="text/javascript">
function submit(e){
	var event = e || window.event ;
	if(event.keyCode == 13){
		var div = document.getElementById("div_text");
		var text = document.getElementById("txt").value;
		var marquee = document.createElement("marquee");
		marquee.direction="left";
		marquee.className="marquee_text";
		var mtext =document.createTextNode(text);
		marquee.appendChild(mtext);
		div.appendChild(marquee);
	}
}

</script>
	
<body>
   <!--  <h1>nePlayer Test Demo</h1>
    <h3>使用 demo前请务必阅读nePlayer<a href="http://vcloud.163.com/docs/player/webGuide.html" target="_blank">开发指南</a>和<a href="http://vcloud.163.com/docs/player/webAPI.html" target="_blank">API文档</a>！！！</h3>
   --> 
   <div  id="div_video">
    <div id="div_text">
    	
    </div>
   <video id="my-video" onclick="playNow()" class="video-js" x-webkit-airplay="allow" webkit-playsinline controls poster="//nos.netease.com/vod163/poster.png" preload="auto" width="960" height="540" data-setup="{}"></video>
    </div>
    <input  type="text" id="txt" name="txt" onkeydown="submit()"/>
   <!--  <div class="row">
        <input type="text" id="playUrl" placeholder="请输入播放地址" style="width:500px">
        <button class="button button-primary button-rounded button-tiny" onclick="playNow()">开始播放</button>
    </div> -->
    <div class="m-panel-container">
        <div class="m-panel-half">
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getCurrentPosition').innerHTML=myPlayer.getCurrentPosition()+'ms'">获取当前播放位置getCurrentPosition</button><span id="getCurrentPosition"></span>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getDuration').innerHTML=myPlayer.getDuration()+'ms'">获取总时长getDuration</button><span id="getDuration"></span>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getPlayableDuration').innerHTML=myPlayer.getPlayableDuration()+'ms'">获取当前已缓存位置的时间点getPlayableDuration</button><span id="getPlayableDuration"></span>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getVersion').innerHTML=myPlayer.getVersion()">获取解码库/sdk版本号getVersion</button><span id="getVersion"></span>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getVideoHeight').innerHTML=myPlayer.getVideoHeight()">获取视频高度getVideoHeight</button><span id="getVideoHeight"></span>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getVideoWidth').innerHTML=myPlayer.getVideoWidth()">获取视频宽度getVideoWidth</button><span id="getVideoWidth"></span>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.play()">播放play</button>
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.pause()">暂停pause</button>
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.reset()">重置reset</button>
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.release()">释放播放器所有资源release</button>
            </div>
            <div class="row">
                <input type="text" id="seekTo" placeholder="设置到指定时间点播放" value="0">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.seekTo(document.getElementById('seekTo').value)">设置到指定时间点播放seekTo</button>
            </div>
            <div class="row">
                <div class="row">
                    source example:<br />
                    1.{ "type": "video/mp4", "src": "http://www.example.com/path/to/video.mp4" }<br />
                </div>
                <textarea id="setDataSource" placeholder="设置数据源" rows="3" cols="80"></textarea><br />
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.setDataSource(JSON.parse(document.getElementById('setDataSource').value))">设置数据源setDataSource</button>
            </div>
        </div>
        <div class="m-panel-half">
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.enterFullscreen()">进入全屏enterFullscreen</button>
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.exitFullscreen()">退出全屏exitFullscreen</button>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.setMute(true)">设置静音setMute</button>
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.setMute(false)">取消静音setMute</button>
            </div>
            <div class="row">
                <input type="text" id="setVolume" placeholder="音量控制">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.setVolume(document.getElementById('setVolume').value)">音量控制setVolume</button>
            </div>
            <div class="row">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getVolume').innerHTML=myPlayer.getVolume()">获取当前音量getVolume</button><span id="getVolume"></span>
            </div>
            <div class="row">
                宽度:<input type="text" id="resizeWidth" placeholder="设置播放器宽度" value="480">
                高度:<input type="text" id="resizeHeight" placeholder="设置播放器高度" value="240">
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="myPlayer.resize(document.getElementById('resizeWidth').value,document.getElementById('resizeHeight').value)">设置播放器宽高resize</button>
            </div>
            <div class="row">
                <div class="row">
                    播放状态:<br />
                    1：播放中<br />
                    2：暂停<br />
                    3：播放结束
                </div>
                <button class="button button-primary button-rounded button-tiny testBtn" onclick="document.getElementById('getPlayState').innerHTML=myPlayer.getPlayState()">获取播放状态getPlayState</button><span id="getPlayState"></span>
            </div>
            <div class="row">
                事件回调:<br />
                var myPlayer = neplayer('my-video');<br />
                myPlayer.onPlayState(1,function(){console.log('play')});<br />
                myPlayer.onPlayState(2,function(){console.log('pause')});<br />
                myPlayer.onPlayState(3,function(){console.log('ended')});<br />
                myPlayer.onError(function(data){console.log(data)});
            </div>
        </div>
    </div>
    <script src="//nos.netease.com/vod163/nep.min.js"></script>
    <script type="text/javascript">
        var testBtnList = document.getElementsByClassName('testBtn');
        var myPlayer = neplayer('my-video', {}, function() {
            console.log('播放器初始化完成');
        });
        var playerTech = videojs("my-video").tech({ IWillNotUseThisInPlugins: true });
        myPlayer.onPlayState(1,function(){
            console.log('play');
        });
        myPlayer.onPlayState(2,function(){
            console.log('pause');
        });
        myPlayer.onPlayState(3,function(){console.log('ended')});
        myPlayer.onError(function(data){console.log(data)});
        for (var i = testBtnList.length - 1; i >= 0; i--) {
            testBtnList[i].disabled = true;
        }
        function playNow() {
            //document.getElementById('playUrl').value
        			var url = "http://flv2233aea6.live.126.net/live/39a3c3a0f45e4014bae8b50febddc7f4.flv?netease=flv2233aea6.live.126.net",
                lowUrl = url.toLowerCase(),
                urlType = lowUrl.substring(0, 4),
                type;
            if (url === '') {
                alert('请输入播放地址');
                return;
            }
            switch (urlType) {
                case 'http':
                    if (lowUrl.indexOf('mp4') !== -1) {
                        type = 'video/mp4';
                    } else if (lowUrl.indexOf('flv') !== -1) {
                        type = 'video/x-flv';
                    } else if (lowUrl.indexOf('m3u8') !== -1) {
                        type = 'application/x-mpegURL';
                    }
                    break;
                case 'rtmp':
                    type = 'rtmp/flv';
                    break;
                // default:
                //     alert('请输入正确的播放地址');
                //     return;
            }
            myPlayer.setDataSource({ type: type, src: url });
            myPlayer.play();
            for (var i = testBtnList.length - 1; i >= 0; i--) {
                testBtnList[i].disabled = false;
            }
        }
    </script>
</body>
</html>
